<template>
  <div class="myCanvas-box">
    <div class="content-box">
      <canvas id="canvas" ref="canvas" width="400" height="400"></canvas>
    </div>
    <div>
      <canvas id="canvas2"  width="400" height="400"></canvas>
    </div>
    <img src="../../assets/logo.png" alt="" id="myImg">
  </div>
</template>

<script>
export default {
  name: 'MyCanvas',
  data() {
    return {

    }
  },
  created() {
  },
  mounted() {
    /* console.log(document.getElementById('canvas'));
    console.log(this.$refs.canvas); */
    this.drawSquare();
    this.drawPic();
  },
  methods: {
    drawSquare() {
      var canvas = document.getElementById('canvas')
      var ctx = canvas.getContext('2d')
      /* ctx.fillStyle='red'
      ctx.fillRect(0,0,100,100)
      ctx.beginPath()
      ctx.moveTo(10, 10);//起点
      ctx.lineTo(60, 10);//向x轴延申10个像素
      ctx.lineTo(60, 60);//向y轴延申10个像素
      ctx.closePath() */
      // ctx.strokeStyle = 'red';//设置颜色
      // ctx.fillStyle = 'blue'
      // ctx.fill()
      /* ctx.fillRect(10,10,50,50);//填充一个矩形
      ctx.strokeRect(70,10,50,50);//描边一个矩形
      ctx.stroke()
      ctx.fillText("填充",20,70) */
      /* ctx.arc(50,200,20,0,2*Math.PI)
      ctx.stroke()
      ctx.arc(100,200,20,0,2*Math.PI) */
      // ctx.fill()
      /* ctx.font = '32px serif'
      ctx.fillText('任嘉伦最帅',10,50)
      ctx.strokeText('任国超也帅',10,100) */
      //画笑脸
      ctx.beginPath()
      ctx.arc(100, 100, 50, 0, 2 * Math.PI, true)
      ctx.moveTo(135, 100)
      ctx.arc(100, 100, 35, 0, Math.PI, false)
      ctx.moveTo(90, 85)
      ctx.arc(85, 85, 5, 0, 2 * Math.PI, true)
      ctx.moveTo(120, 85)
      ctx.arc(115, 85, 5, 0, 2 * Math.PI, true)
      ctx.stroke()
      //三次贝塞尔曲线,画爱心
      ctx.beginPath();
      ctx.moveTo(175,140);
      ctx.bezierCurveTo(175, 137, 170, 125, 150, 125);
      ctx.bezierCurveTo(120, 125, 120, 162.5, 120, 162.5);
      ctx.bezierCurveTo(120, 180, 140, 202, 175, 220);
      ctx.bezierCurveTo(210, 202, 230, 180, 230, 162.5);
      ctx.bezierCurveTo(230, 162.5, 230, 125, 200, 125);
      ctx.bezierCurveTo(185, 125, 175, 137, 175, 140);
      ctx.strokeStyle = 'red';
      ctx.stroke();
      //画图
     /*  let img = document.getElementById('myImg')
      ctx.drawImage(img,0,0) */
      // ctx.clearRect(0,0,400,400);//清除画布
      /* let img = new Image()
      img.src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/7E84E59E72B2B90DB24A5BE19E0D5ABF.png"
      img.onload = function(){
        // ctx.drawImage(img,0,0,200,200)
        ctx.drawImage(img,150,100,200,200,150,150,200,200);
      } */
      
    },
    drawPic(){
      let canvas2 = document.getElementById('canvas2')
      let ctx2 = canvas2.getContext('2d')
      let img = document.getElementById('myImg')
      img.onload=function(){
      ctx2.drawImage(img,0,0,100,100)
      }
    }

  },
}
</script>

<style scoped>
.myCanvas-box{
  margin: 0 auto;
}
#canvas{
  border: 1px solid pink;
}
#canvas2{
  border: 1px solid blue;
}

</style>